@use "../../variables.scss" as *;
@use "./variables.scss" as *;

.spg-panel {
}
.spg-panel__title {
  @include ctrDefaultFont;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  padding: calcSize(2);
  border: none;
  outline: none;
  color: var(--ctr-property-grid-chapter-caption-text-color, var(--sjs-layer-1-foreground-75, #000000bf));
  cursor: pointer;
  background-color: var(--ctr-property-grid-chapter-caption-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  box-shadow: inset 0px -1px 0px var(--ctr-property-grid-chapter-caption-border-color, var(--sjs-border-25, #d4d4d4ff));
  margin: 0;
  transition: color $creator-transition-duration, background-color $creator-transition-duration, opacity $creator-transition-duration;
}

.spg-panel__title:disabled,
.spg-panel__title:disabled:hover {
  color: var(--ctr-property-grid-chapter-caption-text-color-disabled, var(--sjs-layer-1-foreground-100, #000000e6));
  opacity: 0.25;
  cursor: default;
}

.spg-panel__title--collapsed:hover {
  background-color: var(--ctr-property-grid-chapter-caption-background-color-hovered, var(--sjs-layer-1-background-400, #f5f5f5ff));
}

.spg-panel__title--expandable:focus {
  background-color: var(--ctr-property-grid-chapter-caption-background-color-focused, var(--sjs-layer-1-background-400, #f5f5f5ff));
}

.spg-panel__title--expanded {
  @include ctrDefaultBoldFont;
  color: var(--ctr-property-grid-chapter-caption-text-color-selected, var(--sjs-layer-1-foreground-100, #000000e6));
}

.spg-panel__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-top: calc(
    var(--ctr-property-grid-form-padding-top, var(--sjs-spacing-x2)) -
      var(--ctr-property-grid-form-gap, var(--sjs-spacing-x2))
  );
  padding-inline-end: var(--ctr-property-grid-form-padding-right, var(--sjs-spacing-x4));
  padding-bottom: var(--ctr-property-grid-form-padding-bottom, var(--sjs-spacing-x5));
  padding-inline-start: var(--ctr-property-grid-form-padding-left, var(--sjs-spacing-x4));
  box-sizing: border-box;
  background: var(--ctr-property-grid-form-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  box-shadow: inset 0px -1px 0px var(--ctr-property-grid-chapter-caption-border-color, var(--sjs-border-25, #d4d4d4ff));
}

.spg-panel__content {
  .spg-row {
    width: 100%;
    margin-top: var(--ctr-property-grid-form-gap, var(--sjs-spacing-x2));;
  }

  .spg-row--multiple {
    margin-top: var(--ctr-editor-layout-gap, var(--sjs-spacing-x1));
  }
}
.svc-side-bar--mobile {
  .spg-panel__content {
    padding-inline-end: var(--ctr-property-grid-form-padding-right, var(--sjs-spacing-x4));
    padding-inline-start: var(--ctr-property-grid-form-padding-left, var(--sjs-spacing-x4));
  }
}

.spg-question__nopadding {
  .spg-panel__content {
    padding: 0px;
    box-shadow: unset;
  }
}
.spg-row--enter.spg-row.spg-row.spg-row {
  margin-top: 0;
}
.spg-row--enter {
  animation-fill-mode: forwards;
  animation-name: fadeIn, moveInWithOverflow;
  min-height: 0 !important;
  opacity: 0;
  height: 0;
  animation-timing-function: $ease-out;
  animation-delay: $spg-row-fade-in-delay, 0s, 0s;
  animation-duration: $spg-row-fade-in-duration, $spg-row-move-in-duration, $spg-row-move-in-duration;
}
.spg-row--delayed-enter {
  animation-delay: calc(#{$spg-row-fade-in-delay} + #{$spg-row-fade-in-animation-delay}),
    $spg-row-fade-in-animation-delay, $spg-row-fade-in-animation-delay;
}

.spg-row--leave {
  animation-name: fadeIn, moveInWithOverflow;
  animation-timing-function: $reverse-ease-out;
  animation-fill-mode: forwards;
  animation-direction: reverse;
  min-height: 0 !important;
  animation-delay: 0s, $spg-row-move-out-delay, $spg-row-move-out-delay;
  animation-duration: $spg-row-fade-out-duration, $spg-row-move-out-duration, $spg-row-move-out-duration;
}

.spg-panel__content--enter {
  animation-name: fadeIn, moveInWithOverflow;
  min-height: 0 !important;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: $ease-out;
  animation-duration: $spg-expand-fade-in-duration, $spg-expand-move-in-duration, $spg-expand-move-in-duration;
  animation-delay: $spg-expand-fade-in-delay, 0s, 0s;
}

.spg-panel__content--leave {
  animation-name: fadeIn, moveInWithOverflow;
  min-height: 0 !important;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  animation-timing-function: $reverse-ease-out;
  animation-duration: $spg-collapse-fade-out-duration, $spg-collapse-move-out-duration, $spg-collapse-move-out-duration;
  animation-delay: 0s, $spg-collapse-move-out-delay, $spg-collapse-move-out-delay;
}


.svc-creator--disable-animations {
  .spg-row--enter,
  .spg-row--leave,
  .spg-panel__content--enter,
  .spg-panel__content--leave {
    animation: none;
  }
}
.spg-panel.spg-panel--group {
  &>.spg-panel__content {
    padding: 0;
    box-shadow: none;
  }
  .spg-panel__title {
    @include ctrDefaultFont;
    color: var(--ctr-label-text-color, var(--sjs-layer-1-foreground-50, #00000080));
    box-shadow: none;
    background-color: transparent;
    padding-top: var(--ctr-label-padding-top, var(--sjs-spacing-x1));
    padding-inline-end: var(--ctr-label-padding-right, 0px);
    padding-bottom: var(--ctr-label-padding-bottom, var(--sjs-spacing-x1));
    padding-inline-start: var(--ctr-label-padding-left, 0px);
    color: var(--ctr-label-text-color, var(--sjs-layer-1-foreground-50, #00000080));
  }
  .spg-row {
    margin-top: var(--ctr-editor-layout-gap, var(--sjs-spacing-x1));
  }
  .spg-row:first-of-type {
    margin-top: 0;
  }
}